export function buildSearchForm() {
    return {
        // labelPosition: "top",
        // inlineLabelWidth: "150px",
        // inlineComponentWidth: "100px",
        setterFormValues: [
            {
                component: "Input",
                label: "充电站名称",
                name: "name",
                placeholder: "请选择",
                type: "number",
                // disabled:true,
                maxlength: 10,
                // rules: [
                //     { required: true, message: '请输入名称', trigger: 'blur' },
                // ]
            },
            {
                label: "充电站类型",
                name: "type",
                component: "Select",
                placeholder: "请选择报警名称",
                dataSource: [
                    { "label": "类型1", "value": 1 },
                    { "label": "类型2", "value": 2 },
                    { "label": "类型3", "value": 3 },
                ],
                onChange: function (val) {
                    console.log('------', val)
                }
            },
            {
                label: "充电站状态",
                name: "status",
                component: "Select",
                labelWidth:"150px",
                componentWidth:"300px",
                placeholder: "请选择报警名称",
                dataSource: [
                    { "label": "状态1", "value": 1 },
                    { "label": "状态2", "value": 2 },
                    { "label": "状态3", "value": 3 },
                ]
            },

        ],
        exportBtnProps: {
            onClick: fetchExport
        }
    }
}

export function buildTableActionBtns(methodsMap) {
    const { reloadTableList, changeDialogTitle, openExtraDialogVisible } = methodsMap;
    return {
        align: "right",
        addBtnProps: {
            onClick: () => {
                changeDialogTitle('新增充电站')
            }
        }, // 去掉这个属性，就不显示“新增”按钮了
        btnList: [
            {
                btnText: "刷新表格",
                onClick: () => {
                    console.log('点击修改按钮')
                    reloadTableList()
                }
            },
            {
                btnText: "额外的弹窗",
                onClick: () => {
                    openExtraDialogVisible()
                }
            },
        ]
    }
}

export function buildTable(methodsMap) {
    const { changeDialogTitle } = methodsMap;

    return {
        columns: [
            {
                type: "selection",
            },
            {
                label: "充电站名称",
                name: "name",
                minWidth: "110"
            },
            {
                label: "充电站ID",
                name: "id"
            },
            {
                label: "充电站类型",
                name: "type",
                minWidth: "110",
                render: (val) => {
                    switch (val) {
                        case 1:
                            return "类型1"
                        case 2:
                            return "类型2"
                        case 3:
                            return "类型3"
                    }
                }
            },
            {
                label: "充电站状态",
                name: "status",
                minWidth: "110",
                render: (val) => {
                    switch (val) {
                        case 1:
                            return "状态1"
                        case 2:
                            return "状态2"
                        case 3:
                            return "状态3"
                    }
                }
            },
            {
                label: "详细地址（省市区地址）",
                name: "address",
                minWidth: "200"
            },
            {
                label: "充电桩数",
                name: "chargeNum",
            },
            {
                label: "所属单位",
                name: "com"
            },
        ],
        fetchDataList: fetchDataList,
        rowKey: "id",
        deleteBtnProps: { // 去掉这个属性，就不显示“删除”按钮了
            icon: "el-icon-delete",
            style: "color:red",
            onClick: (id, row) => {
                console.log('id', id)
                console.log('row', row)
                console.log('点击删除按钮')
            }
        },
        updateBtnProps: { // 去掉这个属性，就不显示“修改”按钮了
            icon: "el-icon-edit",
            onClick: () => {
                changeDialogTitle('修改充电站')
            }
        },
        actionColumns: {
            minWidth: "300",
            actionBtns: [
                {
                    btnText: "详情",
                    icon: "el-icon-edit",
                },
                {
                    btnText: "定位",
                    icon: "el-icon-edit",
                },
                {
                    btnText: "站属充电桩",
                    icon: "el-icon-edit",
                },
            ]
        }
    }
}

export function buildDialogForm() {
    return {
        inlineLabelWidth: "110px",
        evalUtilMap: {
            _fetchChargeNum: fetchChargeNum
        },
        setterFormValues: [
            {
                group: "ColumnGroup",
                items: [
                    {
                        component: "Input",
                        label: "充电站名称",
                        name: "name",
                        disabled: {
                            type: "js",
                            expression: `props.type === 1`
                        },
                        placeholder: "请输入充电站名称",
                        required: true
                    },
                    {
                        label: "充电站编码",
                        name: "code",
                        component: "Input",
                        placeholder: "请输入充电站编码",
                        required: true,
                    },
                ]
            },
            {
                group: "ColumnGroup",
                items: [
                    {
                        label: "充电站类型",
                        name: "type",
                        component: "Select",
                        placeholder: "请选择充电站类型",
                        required: true,
                        fetchData: getChargeTypeList,
                        onChange: {
                            type: "js",
                            expression: `function(val){
                                _fetchChargeNum(val).then(res=>{
                                    field.setValue("chargeNum",res)
                                })
                            }`
                        }

                    },
                    {
                        label: "充电桩个数",
                        name: "chargeNum",
                        component: "Input",
                        placeholder: "请输入充电桩个数",
                        disabled: true,
                    },
                ]
            },
            {
                group: "ColumnGroup",
                cols: [12, 7, 5],
                items: [
                    {
                        label: "充电站状态",
                        name: "status",
                        component: "Select",
                        placeholder: "请选择充电站状态",
                        required: true,
                        dataSource: [
                            { label: "状态1", value: 1 },
                            { label: "状态2", value: 2 },
                            { label: "状态3", value: 3 },
                        ]
                    },
                    {
                        label: "经度和纬度",
                        name: "lat",
                        component: "Input",
                        placeholder: "请输入经度"
                    },
                    {
                        name: "lng",
                        component: "Input",
                        placeholder: "请输入纬度"
                    },
                ]
            },
            {
                group: "ColumnGroup",
                items: [
                    {
                        label: "充电站详细地址",
                        name: "address",
                        component: "CascaderSelect",
                        placeholder: "请选择省市区",
                        dataSource: [],
                        props: {
                            checkStrictly: false,
                            expandTrigger: "click"
                        }
                    },
                    {
                        name: "addressInfo",
                        component: "Input",
                        placeholder: "请输入具体道路及位置"
                    },
                ]
            },
            {
                group: "ColumnGroup",
                items: [
                    {
                        label: "电站所属运营商",
                        name: "com",
                        component: "Input",
                        placeholder: "请输入电站所属运营商",
                    },
                    {
                        label: "支付方式(多选)",
                        name: "pay",
                        component: "CheckboxGroup",
                        dataSource: [
                            { label: "APP", value: 1 },
                            { label: "APP", value: 2 },
                            { label: "APP", value: 3 },
                            { label: "APP", value: 4 },
                        ],
                    },
                ]
            },
            {
                group: "ColumnGroup",
                cols: [9, 3, 7, 5],
                items: [
                    {
                        label: "停车收费标准",
                        component: "Input",
                        name: "park",
                    },
                    {
                        name: "free",
                        component: "CheckboxGroup",
                        dataSource: [
                            { label: "免费", value: 1 },
                        ]
                    },
                    {
                        label: "营业时间",
                        name: "startTime",
                        component: "DatePicker",
                    },
                    {
                        name: "endTime",
                        component: "DatePicker",
                    }
                ]
            }
        ],
        onOk: (values) => {
            console.log("表单数据values:", values);
            // 在这里调用接口，参数从values中获取
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve(true)
                }, 2000)
            })
        }
    }
}
function getChargeTypeList() {
    return Promise.resolve([
        { label: "类型1", value: 1 },
        { label: "类型2", value: 2 },
        { label: "类型3", value: 3 },
    ])
}
function fetchChargeNum(chargeType) {
    return Promise.resolve(100 * chargeType)
}

function getChargeStatusList() {
    return Promise.resolve([
        { label: "类型1", value: 1 },
        { label: "类型2", value: 2 },
        { label: "类型3", value: 3 },
    ])
}


/**
 * 表格接口
 * @param {*} data 组件返回参数，无需关注
 * @returns Promise<{ data: [], totalCount: number }> 
 */
function fetchDataList(data) {
    console.log("表格数据参数:", data);
    const nano = () => Math.ceil(Math.random() * 100 * Date.now()).toString(32)
    const mockData = {
        data: new Array(data?.pageSize).fill(1).map(() => {
            const id = nano()
            return {
                name: `充电站名称${id}`,
                status: Math.ceil(Math.random() * 3),
                "code": "ww",
                "type": Math.ceil(Math.random() * 3),
                "chargeNum": "33",
                "lat": "12121",
                "lng": "232323",
                "address": "yizhi",
                "addressInfo": "111",
                "com": "333",
                "pay": [1, 2],
                "park": "www",
                "free": [1],
                "startTime": "2024-03-25",
                "endTime": "2024-03-15",
                id: id
            }
        }),
        totalCount: 18
    }
    return Promise.resolve(mockData)
}

/**
 * 导出接口
 * @param {*} data 组件返回参数，无需关注
 * @returns Promise<{ fileData: file, fileName: string }>
 */
function fetchExport(data) {
    console.log("导出文件参数:", data)
    // return Promise.resolve({ fileData: null, fileName: "导出文件.xlsx" })
}

/**
 * 新增/修改
 * @param {*} data 组件返回参数，无需关注
 * @returns Promise<void>
 */
function insertApi(data) {
    console.log("新增或修改参数：", data);
    return Promise.resolve(true)
}


/**
 * 删除
 * @param {*} data 组件返回参数，无需关注
 * @returns Promise<void>
 */
function deleteApi(data) {
    console.log("删除参数：", data);
    return Promise.resolve(true)
}
